{% extends 'web/layout/manage.html' %}
{% load static %}
{% load dashboard %}
{% load issues %}
{% block css %}
    <style>
        .table-right > tbody > tr > td.label-left{
            width: 90px;
        }
        .table-right > tbody > tr > td{
            border: 0;
        }

        .status-count{
            text-align: center;
            margin-top: 10px;
            margin-bottom: 30px;
            font-size: 14px;
        }
        .status-count .count{
            font-size: 25px;
        }
        .status-count a{
            text-decoration:none;
        }
        .user-item .title{
            margin-bottom: 20px;
        }
        .user-item .avatar, .top-10 .avatar{
            float: left;
            margin-right: 10px;
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: #f0ad4e;
            color: white;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
        }
        .user-item .text{
            line-height: 30px;
        }
        .top-10 .avatar{
            margin-right: 0;
        }
        .top-10 td{
            padding: 5px 10px;
        }
        .table > tbody > tr > td{
            border-top: 0;
            border-bottom: 1px solid #dddddd;
        }

    </style>
{% endblock %}


{% block content %}
    <div class="container-fluid" style="margin-top: 20px;">
        <div class="row">
            <div class="col-md-8">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-bar-chart" aria-hidden="true"></i>
                        新增问题趋势
                    </div>
                    <div class="panel-body">
                        <div id="chart" style="width: 100%;min-height: 200px"></div>
                    </div>
                </div>

                <div class="row"> <!-- class="row"让下面的两个div去掉边距，跟最上面那个div对齐 -->
                    <div class="col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <i class="fa fa-quora" aria-hidden="true"></i>
                                问题
                            </div>
                            <div class="panel-body">
                            {% for key,item in status_dict.items %}
                                <div class="col-sm-4 status-count">
                                    <a href="{% url 'issues' project_id=request.tracer.project.id %}?status={{ key }}">
                                        <div class="count">{{ item.count }}</div>
                                        <div>{{ item.text }}</div>
                                    </a>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <i class="fa fa-user" aria-hidden="true"></i>
                                项目成员
                            </div>
                            <div class="panel-body user-item">
                                <div class="col-sm-12 title">创建者</div>
                                <div class="clearfix" style="margin-bottom: 30px">
                                    <div class="col-sm-4">
                                        <div class="avatar">{{ request.tracer.project.creator.username.0 | upper }}</div>
                                        <div class="text">{{ request.tracer.project.creator.username }}</div>
                                    </div>
                                </div>
                                <div class="col-sm-12 title">参与者</div>
                                <div>
                                    {% for item in user_list %}
                                        <div class="col-sm-4">
                                            <div class="avatar">{{ item.user__name.0 | upper }}</div>
                                            <div class="text">{{ item.user__name }}</div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-cog title-icon"></i>
                        详细
                    </div>
                    <div class="panel-body">
                        <table class="table table-right">
                            <tbody>
                            <tr>
                                <td class="label-left">项目名称：</td>
                                <td>{{ request.tracer.project.name }}</td>
                            </tr>
                            <tr>
                                <td class="label-left">项目描述：</td>
                                <td>{{ request.tracer.project.desc }}</td>
                            </tr>
                            <tr>
                                <td class="label-left">创建时间：</td>
                                <td>{{ request.tracer.project.create_datetime }}</td>
                            </tr>
                            <tr>
                                <td class="label-left">项目空间：</td>
                                <td>{% user_space request.tracer.project.user_space %}
                                    / {{ request.tracer.price_policy.project_space }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-list-ul" aria-hidden="true"></i>
                        动态
                    </div>
                    <div class="panel-body top-10">
                        <table class="table table-right">
                            <tbody>
                            {% for item in top_ten_object %}
                                <tr>
                                    <td style="width: 46px;">
                                        <div class="avatar">{{ item.creator.username.0 | upper }}</div>
                                    </td>
                                    <td>
                                        <div>{{ item.creator.username }}</div>
                                        <div>指派 <a href="{% url 'issues_detail' project_id=request.tracer.project.id issues_id=item.id %}">
                                            {% string_just item.id %}</a>给 {{ item.assign.username }}
                                        </div>
                                    </td>
                                    <td style="width: 156px;">
                                        {{ item.create_datetime }}
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>

                </div>

            </div>
        </div>

    </div>

{% endblock %}

{% block js %}
    <script src="{% static 'web/plugin/highcharts/highcharts.js'%}"></script>
    <script>
        // 把默认使用UTC的时间改为当前设置的时区
        Highcharts.setOptions({
            global:{
                useUtc:false
            }
        });
        var INIT_CHART = "{% url 'issues_chart' project_id=request.tracer.project.id %}";

        $(function (){
            initChart();
        });
        function initChart(){
            // 初始化
            var config = {
                title:{text:''}, // 不显示标题
                subtitle:{text:''}, // 关闭副标题
                legend: {
                    enabled:false // 关闭图例提示
                },
                credits:{
                  enabled: false // 关闭版权信息
                },
                yAxis:{
                    title:{
                        text:'问题数量'
                    }
                },
                xAxis:{
                   type:'datetime',
                   tickInterval:60 * 60 * 24 * 1000, // 间隔时间是1天
                   labels:{
                       formatter:function (){
                           return Highcharts.dateFormat('%m-%d',this.value);
                       },
                       rotation:-30  // 倾斜30度
                   }
                },
                // 鼠标放在图上时显示的数据
                tooltip:{
                    headerFormat:'<b>{point.key}</b><br>',
                    pointFormat:'<span style="color:{series.color}">\u25cf</span>数量: {point.y}',
                    xDateFormat:'%Y-%m-%d',
                },
                plotOptions: {
                    area: {
                        stacking: 'normal',
                        lineColor: '#666666',
                        lineWidth: 1,
                        marker: {
                            lineColor: '#666666',
                            lineWidth: 1,
                        }
                    }
                },
                series:[{
                    data:[]
                }]
                /*series:[{
                    name:'爱你就hi',
                    data:[11,22,33,44,55]
                }],
                responsive:{
                    rules:[{
                        condition:{
                            maxWidth:500
                        },
                        chartOptions:{
                            legend:{
                                layout:'horizontal',
                                align:'center',
                                verticalAlign:'bottom'
                            }
                        }
                    }]
                }*/
            };
            $.ajax({
                url:INIT_CHART,
                type: 'GET',
                dataType:'JSON',
                success:function (res){
                    config.series[0].data = res.data;
                    Highcharts.chart('chart',config);
                }
            })
        }
    </script>
{% endblock %}

















